<form class="layui-form" action="" lay-filter="component-form-editsale">
    <script type="text/html" template lay-url="{{ layui.setter.baseUrl }}sale/edit?id={{ d.params.id }}" 
    lay-done="layui.form.render(null, 'component-form-editsale');">
        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>活动介绍</li>
                <li>页面配置</li>
                <li>常规视频</li>
                <li>混剪合成</li>
                <li>海报设置</li>
                <li>卡券设置</li>
                <li>接口权限</li>
            </ul>
            <div class="layui-tab-content">
                <!-- 基本信息 -->
                <div class="layui-tab-item layui-show">
                    {{# if(d.data.isagent==1){ }}
                    <div class="layui-form-item">
                        <label class="layui-form-label">商家编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[member_id]" value="{{ d.data.member_id }}" lay-verify="required|number" autocomplete="on" placeholder="请输入商家编号" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">商家编号即活动所属商家的ID，可在“商家管理”页面查看商家编号</div>
                        </div>
                    </div>
                    {{# }else{ }}
                    <input type="hidden" name="data[member_id]" value="{{ d.data.member_id }}">
                    {{# } }}
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户openid</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[real_openid]" value="{{ d.data.real_openid }}" lay-verify="" autocomplete="on" placeholder="请输入商户openid" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">填入抖音商户OPENID，视频“@商户名称”时与该选项有关，可留空，输入错误会影响使用，可在“用户管理”页面查看</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[title]" value="{{ d.data.title }}" lay-verify="required" autocomplete="on" placeholder="请输入活动标题" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[starttime]" value="{{ d.data.starttime }}" lay-verify="required|date" id="LAY-form-date-start" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[endtime]" value="{{ d.data.endtime }}" lay-verify="required|date" id="LAY-form-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动类型</label>
                        <div class="layui-input-block">
                            <input type="radio" lay-filter="paytype" name="data[paytype]" value="0" title="卡券模式（进页面后领取卡券，再引导跳转其他功能）" {{#  if(d.data.paytype == '0'){ }}checked=""{{#  } }}>
                            <input type="radio" lay-filter="paytype" name="data[paytype]" value="1" title="纯推广模式（不发卡券，点击发布视频后，跳转到商家抖音主页）" {{#  if(d.data.paytype == '1'){ }}checked=""{{#  } }}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">跳转类型</label>
                        <div class="layui-input-block">
                            <input type="radio" lay-filter="jump" name="data[jump]" value="card" title="进入卡券列表页面" {{#  if(d.data.jump == 'card'){ }}checked=""{{#  } }}>
                            <input type="radio" lay-filter="jump" name="data[jump]" value="real_share" title="进入商户抖音主页" {{#  if(d.data.jump == 'real_share'){ }}checked=""{{#  } }}>
                            <input type="radio" lay-filter="jump" name="data[jump]" value="url" title="打开自定义链接地址" {{#  if(d.data.jump == 'url'){ }}checked=""{{#  } }}>
                            <br>
                            <div class="layui-form-mid layui-word-aux">领券(卡券模式)或发布视频(纯推广模式)后的跳转页面类型</div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="jump_url" style="{{d.data.jump=='url'?'':'display:none'}}">
                        <label class="layui-form-label">自定义链接</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[jump_url]" value="{{ d.data.jump_url }}" lay-verify="" autocomplete="on" placeholder="请输入自定义链接" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动模板</label>
                        <div class="layui-input-block">
                            <input type="radio" lay-filter="template" name="data[template]" value="index" title="黑色模板" {{#  if(d.data.template == 'index'){ }}checked=""{{#  } }}>
                            <input type="radio" lay-filter="template" name="data[template]" value="index1" title="白色模板" {{#  if(d.data.template == 'index1'){ }}checked=""{{#  } }}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">扫码次数</label>
                        <div class="layui-input-block">
                            <input type="number" name="data[number]" value="{{ d.data.number }}" lay-verify="required" autocomplete="on" placeholder="请输入扫码次数" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">填 0 为不限制</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">抖音商户主页</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[real_share]" value="{{ d.data.real_share }}" autocomplete="on" placeholder="请输入商户抖音首页的分享链接" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">填入商户抖音门店的分享链接，可留空，例如：https://v.douyin.com/JpgNwPt/</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">抖音商户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[poi_name]" value="{{ d.data.poi_name }}" autocomplete="on" placeholder="请输入抖音商户名称" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">填入抖音商户名称，视频的商户名称跟该选项有关</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户联系地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[poi_address]" value="{{ d.data.poi_address }}" autocomplete="on" placeholder="请输入商户联系地址" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">填入商户地址，用于页面显示，与视频内容无关</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">抖音商户位置</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[poi_share]" value="{{ d.data.poi_share }}" autocomplete="on" placeholder="请输入抖音商户位置" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">填入抖音商户地理位置页的分享链接，视频的地址跟该选项有关，可留空，例如：https://v.douyin.com/Jg6wryE/</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">小程序id</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[micro_app_id]" value="{{ d.data.micro_app_id }}" autocomplete="on" placeholder="请输入小程序id" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">示例：ttef9b112671b152ba</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">小程序url</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[micro_app_url]" value="{{ d.data.micro_app_url }}" autocomplete="on" placeholder="请输入小程序url" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">吊起小程序时的url参数。示例：pages/index?param=123</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">小程序标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[micro_app_title]" value="{{ d.data.micro_app_title }}" autocomplete="on" placeholder="请输入小程序标题" class="layui-input">
                        </div>
                    </div>
                </div>
                <!-- 活动介绍 -->
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动介绍</label>
                        <div class="layui-input-block">
                            <textarea id="contentEditor" name="data[content]" style="display: none;">{{ d.data.content }}</textarea>
                        </div>
                    </div>
                </div>
                <!-- 页面配置 -->
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][congratulations]" value="{{ d.data.replace.congratulations }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“~恭喜~”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“~恭喜~”文本</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][participate]" value="{{ d.data.replace.participate }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“你已经成功参与传播达人”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“你已经成功参与传播达人”文本</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][works]" value="{{ d.data.replace.works }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“你参与传播的作品是”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“你参与传播的作品是”文本</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][introduction]" value="{{ d.data.replace.introduction }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“活动介绍”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“活动介绍”文本</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][get_button]" value="{{ d.data.replace.get_button }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“立即领取卡券”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“立即领取卡券”文本</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][view_button]" value="{{ d.data.replace.view_button }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“查看我的卡券”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“查看我的卡券”文本</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">替换文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[replace][cart_error]" value="{{ d.data.replace.cart_error?d.data.replace.cart_error:'领取失败' }}" lay-verify="required" autocomplete="on" placeholder="请输入替换页面“领取失败”文本" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">替换页面“领取失败”文本</div>
                        </div>
                    </div>
                </div>
                <!-- 常规视频 -->
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频封面</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <button
                                type="button"
                                class="layui-btn"
                                id="video_pic-upload"
                                data-uploadtype="{{ d.data.uploadtype }}"
                                data-uploadurl="{{ d.data.uploadurl }}"
                                data-cdnurl="{{ d.data.cdnurl }}"
                                >上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img2" id="video_pic-upload-img" {{# if(!d.data.video.pic){ }}style="display:none"{{# } }} src="{{ d.data.video.pic }}">
                                    <p id="test-upload-demoText"></p>
                                </div>
                            </div>
                            <input type="hidden" id="data-video_pic" name="data[video][pic]" value="{{ d.data.video.pic }}">
                        </div>
                        <input type="hidden" id="mp4-upload" data-uploadurl="{{ d.data.mp4uploadurl }}" data-cdnurl="{{ d.data.cdnurl }}">
                        <input type="hidden" id="mp4-uploads" data-uploadurl="{{ d.data.mp4uploadurl }}" data-cdnurl="{{ d.data.cdnurl }}">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">延迟发布</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[video][delay]" value="{{ d.data.video.delay?d.data.video.delay:'0' }}" lay-verify="required" autocomplete="on" placeholder="请输入延迟发布时间" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">单位：秒</div>
                        </div>
                    </div>
                    {{# if(d.data.video.list){layui.videoform=d.data.video.list} }}
                    <div class="layui-form-item" id="videoformview"></div>
                </div>
                <!-- 混剪合成 -->
                <div class="layui-tab-item">
                    {{# if(layui.alivideo && layui.alivideo.media){ }}
                    <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FFB800;">已上传：{{layui.alivideo.media.length}}个素材，待生成视频：{{layui.alivideo.num}}个。若要重新生成视频，请等待视频生成完成后，再操作！</blockquote>
                    <blockquote class="layui-elem-quote" style="color:#FF5722;border-color:#FFB800;">若超过10分钟还没有一个视频成功生成，可<a href="javascript:;" target="_blank" onclick="layui.chongshi(this)">点击此处</a>重试。若点击后是空白页面，请检查阿里云AccessKeyId和AccessKeySecret是否配置正确。</blockquote>
                    {{# } }}
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" onclick="layui.aliaddvideo()">合成新视频</button>
                </div>
                <!-- 海报设置 -->
                <div class="layui-tab-item">
                    <div id="poster"></div>
                    <div style="float:left;padding:0 5px;">
                        <p style="padding-bottom:5px">
                            <button
                            type="button"
                            class="layui-btn"
                            id="poster-images-upload"
                            data-uploadtype="{{ d.data.uploadtype }}"
                            data-uploadurl="{{ d.data.uploadurl }}"
                            data-cdnurl="{{ d.data.cdnurl }}"
                            >背景图片</button>
                        </p>
                        <p><button class="layui-btn layui-btn-danger btn-com" type="button" data-type="qr">二维码</button></p>
                    </div>
                    <div class="layui-clear"></div>{{# layui.poster=d.data.poster }}
                </div>
                <style>
                    #poster {
                        width:320px;height:504px;background-color:#F0F0F0;position:relative;float:left;
                    }
                    #poster .bg { position:absolute;width:100%;z-index:0}
                    #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #DDD; }
                    #poster .drag[type=img] { width:100%;height:100%; }
                    #poster .drag[type=img] img { width:100%; }
                    #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;color:#333;}
                    #poster .drag img {position:absolute;z-index:0;width:100%; }
                    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
                        position:absolute;
                        width:7px;
                        height:7px;
                        z-index:1;
                        font-size:0;
                        border-radius:4px;
                    }
                    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
                        background:#FC0;
                    }
                    .rLeftDown,.rRightUp{cursor:ne-resize;}
                    .rRightDown,.rLeftUp{cursor:nw-resize;}
                    .rRight,.rLeft{cursor:e-resize;}
                    .rUp,.rDown{cursor:n-resize;}
                    .rLeftDown{left:-4px;bottom:-4px;}
                    .rRightUp{right:-4px;top:-4px;}
                    .rRightDown{right:-4px;bottom:-4px;}
                    .rRightDown{background-color:#00F;}
                    .rLeftUp{left:-4px;top:-4px;}
                    .rRight{right:-4px;top:50%;margin-top:-4px;}
                    .rLeft{left:-4px;top:50%;margin-top:-4px;}
                    .rUp{top:-4px;left:50%;margin-left:-4px;}
                    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
                    .context-menu-layer { z-index:9999;}
                    .context-menu-list { z-index:9999;}
                </style>
                <!-- 卡券设置 -->
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">核销密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="data[card][pwd]" value="{{ d.data.card.pwd?d.data.card.pwd:'' }}" lay-verify="" autocomplete="on" placeholder="请输入核销密码" class="layui-input">
                            <div class="layui-form-mid layui-word-aux">若不需要核销密码，留空即可</div>
                        </div>
                    </div>
                    {{# if(d.data.card.list){layui.cardform=d.data.card.list;layui.cardidx=d.data.card.idx;} }}
                    <div class="layui-form-item" id="cardformview"></div>
                </div>
                <!-- 接口权限 -->
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户管理</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="data[scope]" class="scope" title="获取用户信息" lay-skin="primary" value="user_info" {{d.data.scope.indexOf('user_info')!=-1?'checked':''}}>
                            <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                <span>获取用户信息</span><i class="layui-icon layui-icon-ok"></i>
                            </div>
                            <input type="checkbox" name="data[scope]" class="scope" title="获取手机号" lay-skin="primary" value="mobile_alert" {{d.data.scope.indexOf('mobile_alert')!=-1?'checked':''}}>
                            <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                <span>获取手机号</span><i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">抖音视频</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="data[scope]" class="scope" title="上传视频" lay-skin="primary" value="video.create" {{d.data.scope.indexOf('video.create')!=-1?'checked':''}}>
                            <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                <span>上传视频</span><i class="layui-icon layui-icon-ok"></i>
                            </div>
                            <input type="checkbox" name="data[scope]" class="scope" title="视频管理" lay-skin="primary" value="data.external.item" {{d.data.scope.indexOf('data.external.item')!=-1?'checked':''}}>
                            <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                <span>视频管理</span><i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <input type="hidden" id="token" name="data[token]" value="{{ d.data.token }}">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1" name="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </script>
    </form>
    <style>
        .layui-upload-img2 {
            width: 150px;
            height: 150px;
            overflow: hidden;
            margin-right: 10px;
            object-fit: cover;
        }
    </style>
    <script id="videoform" type="text/html">
        {{# for(let i=0; i<d.length; i++){ }}
        <label class="layui-form-label">视频{{i+1}}</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input onkeyup="layui.videoform[{{i}}].title=this.value" type="text" name="data[video][list][{{i}}][title]" value="{{d[i].title}}" placeholder="请输入视频标题" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input id="mp4-upload-{{i}}" type="text" name="data[video][list][{{i}}][path]" value="{{d[i].path}}" placeholder="请上传视频" class="layui-input" disabled>
            </div>
            <button type="button" class="layui-btn" style="float:left" onclick="layui.addvideo({{i}})">上传视频</button>
            <a href="{{d[i].path}}" id="mp4-upload-a-{{i}}" target="_blank" class="layui-btn layui-btn-normal" style="float:left;{{ d[i].path?'':'display:none;' }}">查看视频</a>
            <a href="javascript:;" class="layui-btn layui-btn-danger" onclick="layui.delvideoform({{i}})" style="float:left">删除</a>
            <div style="clear:both;height:5px"></div>
        </div>
        {{# } }}
        <div class="layui-input-block">
            <a href="javascript:;" class="layui-btn layui-btn-normal" onclick="layui.addvideoform()">添加视频</a>
            <button type="button" class="layui-btn layui-btn-danger" onclick="layui.addvideos()">批量上传</button>
        </div>
    </script>
    <script id="cardform" type="text/html">
        {{# for(let i=0; i<d.length; i++){ }}
        <div class="layui-btn-group">
            <input type="hidden" name="data[card][list][{{i}}][name]" value="{{d[i].name}}">
            <input type="hidden" name="data[card][list][{{i}}][term]" value="{{d[i].term}}">
            <input type="hidden" name="data[card][list][{{i}}][starttime]" value="{{d[i].starttime}}">
            <input type="hidden" name="data[card][list][{{i}}][endtime]" value="{{d[i].endtime}}">
            <input type="hidden" name="data[card][list][{{i}}][num]" value="{{d[i].num}}">
            <input type="hidden" name="data[card][list][{{i}}][limit]" value="{{d[i].limit}}">
            <input type="hidden" name="data[card][list][{{i}}][desc]" value="{{d[i].desc}}">
            <button type="button" class="layui-btn{{# if(layui.cardidx!=i){ }} layui-btn-warm{{# } }}" onclick="layui.editcardform({{i}})">{{d[i].name}}</button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="layui.delcardform({{i}})"><i class="layui-icon">&#xe640;</i></button>
        </div>
        {{# } }}
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-normal" onclick="layui.createcardform()">添加新卡券</button>
        </div>
        <div style="background-color:#f0f0f0;padding:15px;border-radius:7px;margin-top:7px;">
            <div class="layui-form-item">
                <label class="layui-form-label">卡券名称</label>
                <div class="layui-input-block">
                    <input type="text" id="card_name" name="data[card][name]" value="{{ d[layui.cardidx].name }}" autocomplete="on" placeholder="请输入卡券名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">有效天数</label>
                <div class="layui-input-block">
                    <input type="number" id="card_term" name="data[card][term]" value="{{ d[layui.cardidx].term }}" autocomplete="on" placeholder="请输入有效天数" class="layui-input">
                    <div class="layui-form-mid layui-word-aux">填 0 为不限制，若同时设置了结束时间，则此处设置无效，以结束时间为准。</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" name="data[card][starttime]" value="{{ d[layui.cardidx].starttime?d[layui.cardidx].starttime:'' }}" lay-verify="" id="starttime{{layui.cardidx}}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    <div class="layui-form-mid layui-word-aux">留空为不限制</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="data[card][endtime]" value="{{ d[layui.cardidx].endtime?d[layui.cardidx].endtime:'' }}" lay-verify="" id="endtime{{layui.cardidx}}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    <div class="layui-form-mid layui-word-aux">留空时，卡券结束时间为用户领取时间加上有效天数。不留空时，有效天数无效，以此处设置为准。</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">卡券数量</label>
                <div class="layui-input-block">
                    <input type="number" id="card_num" name="data[card][num]" value="{{ d[layui.cardidx].num }}" autocomplete="on" placeholder="请输入卡券数量" class="layui-input">
                    <div class="layui-form-mid layui-word-aux">填 0 为不限制</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单人限领</label>
                <div class="layui-input-block">
                    <input type="number" id="card_limit" name="data[card][limit]" value="{{ d[layui.cardidx].limit }}" autocomplete="on" placeholder="请输入单人限领数量" class="layui-input">
                    <div class="layui-form-mid layui-word-aux">填 0 为不限制</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">使用规则</label>
                <div class="layui-input-block">
                    <input type="text" id="card_desc" name="data[card][desc]" value="{{ d[layui.cardidx].desc }}" autocomplete="on" placeholder="请输入使用规则" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="hidden" name="data[card][idx]" value="{{layui.cardidx}}">
                    <a href="javascript:;" class="layui-btn layui-btn-normal" onclick="layui.addcardform()">确认</a>
                </div>
            </div>
        </div>
        <div style="color:#FF5722">点击上方卡券名或添加新卡券按钮即可编辑卡券信息，编辑完成后点击“确认”按钮使本次编辑生效。</div>
    </script>
    <script>
    layui.use(['admin', 'form', 'upload', 'laydate', 'layedit', 'laytpl'], function(data){
        var $ = layui.$
        ,admin = layui.admin
        ,view = layui.view
        ,element = layui.element
        ,layer = layui.layer
        ,laydate = layui.laydate
        ,form = layui.form
        ,upload = layui.upload
        ,layedit = layui.layedit
        ,laytpl = layui.laytpl;
        layui.images = [];
    
        if(!layui.videoform){
            layui.videoform = [];
            layui.videoidx = 0;
        }
        layui.alivideo = '';
        layui.addvideoform = function(){
            layui.videoform.push({
                title: '视频'+(layui.videoform.length+1),
                path: ''
            });
            laytpl($('#videoform').html()).render(layui.videoform, function(html){
                $('#videoformview').html(html);
                layui.form.render(null, 'component-form-editsale');
            });
        }
        layui.delvideoform = function(i){
            layui.videoform.splice(i,1);
            laytpl($('#videoform').html()).render(layui.videoform, function(html){
                $('#videoformview').html(html);
                layui.form.render(null, 'component-form-editsale');
            });
        }
        layui.addvideo = function(i){
            layui.videoidx = i;
            $('#mp4-upload').click();
            return false;
        }
        layui.addvideos = function(){
            $('#mp4-uploads').click();
            return false;
        }
        layui.aliaddvideo = function(i){
            layui.videoidx = i;
            admin.popup({
                title: '视频生成'
                ,area: [$(window).width()*0.618+'px', $(window).height()*0.9+'px']
                ,id: 'LAY-popup-video-add'
                ,success: function(layero, index){
                    view(this.id).render('sale/aliaddvideo');
                }
            });
            return false;
        }
        if(!layui.cardform){
            layui.cardform = [{
                name: '',
                term: '0',
                starttime: '',
                endtime: '',
                num: '0',
                limit: '0',
                desc: ''
            }];
            layui.cardidx = 0;
        }
        layui.rerendercard = function(){
            laytpl($('#cardform').html()).render(layui.cardform, function(html){
                $('#cardformview').html(html);
                layui.form.render(null, 'component-form-editsale');
                laydate.render({
                    elem: '#starttime'+layui.cardidx
                });
                laydate.render({
                    elem: '#endtime'+layui.cardidx
                });
            });
        };
        layui.editcardform = function(i){
            layui.cardidx = i;
            layui.rerendercard();
        }
        layui.addcardform = function(){
            layui.cardform[layui.cardidx].name = $('#card_name').val();
            layui.cardform[layui.cardidx].term = $('#card_term').val();
            layui.cardform[layui.cardidx].starttime = $('#starttime'+layui.cardidx).val();
            layui.cardform[layui.cardidx].endtime = $('#endtime'+layui.cardidx).val();
            layui.cardform[layui.cardidx].num = $('#card_num').val();
            layui.cardform[layui.cardidx].limit = $('#card_limit').val();
            layui.cardform[layui.cardidx].desc = $('#card_desc').val();
            layui.rerendercard();
            layer.msg('操作成功！');
        }
        layui.createcardform = function(){
            layui.cardform.push({
                name: '',
                term: '0',
                starttime: '',
                endtime: '',
                num: '0',
                limit: '0',
                desc: ''
            });
            layui.cardidx = layui.cardform.length-1;
            layui.rerendercard();
        }
        layui.delcardform = function(i){
            if(layui.cardform.length > 1){
                layui.cardform.splice(i,1);
                if(i == layui.cardidx){
                    layui.cardidx = 0;
                }else if(layui.cardidx > 0){
                    layui.cardidx--;
                }
                layui.rerendercard();
            }else{
                layer.msg('至少保留一个卡券！');
            }
        }
    
        var siv = setInterval(function(){
            if($('#video_pic-upload').length > 0){
                upload.render({
                    elem: '#mp4-upload'
                    ,url: $('#mp4-upload').data('uploadurl')
                    ,accept: 'file' //普通文件
                    ,exts: 'mp4'
                    ,done: function(res){
                        if(res.code > 0){
                            if(res.msg != ''){
                                return layer.msg(res.msg);
                            }else{
                                return layer.msg('上传失败');
                            }
                        }
                        $('#mp4-upload-'+layui.videoidx).val($('#mp4-upload').data('cdnurl')+'/'+res.data.key);
                        $('#mp4-upload-a-'+layui.videoidx).attr('href',$('#mp4-upload').data('cdnurl')+'/'+res.data.key).show();
                        layui.videoform[layui.videoidx].path = $('#mp4-upload').data('cdnurl')+'/'+res.data.key;
                        layer.msg('上传成功');
                    }
                });
                upload.render({
                    elem: '#mp4-uploads'
                    ,url: $('#mp4-uploads').data('uploadurl')
                    ,accept: 'file' //普通文件
                    ,exts: 'mp4'
                    ,multiple: true
                    ,done: function(res){
                        if(res.code > 0){
                            if(res.msg != ''){
                                return layer.msg(res.msg);
                            }else{
                                return layer.msg('上传失败');
                            }
                        }
                        layui.addvideoform();
                        var videoidx = layui.videoform.length-1;
                        $('#mp4-upload-'+videoidx).val($('#mp4-uploads').data('cdnurl')+'/'+res.data.key);
                        $('#mp4-upload-a-'+videoidx).attr('href',$('#mp4-uploads').data('cdnurl')+'/'+res.data.key).show();
                        layui.videoform[videoidx].path = $('#mp4-uploads').data('cdnurl')+'/'+res.data.key;
                        layer.msg('上传成功');
                    }
                });
    
                laytpl($('#videoform').html()).render(layui.videoform, function(html){
                    $('#videoformview').html(html);
                    layui.form.render(null, 'component-form-editsale');
                });
                layui.rerendercard();
                laydate.render({
                    elem: '#LAY-form-date-start'
                });
                laydate.render({
                    elem: '#LAY-form-date'
                });
                var uploadtype = $('#video_pic-upload').data('uploadtype');
                switch (uploadtype) {
                    case 'qiniu':
                    var upload_data = {
                            'token': function(){
                                var upload_token = '';
                                $.ajax({  
                                    type: "GET",
                                    url: layui.setter.baseUrl+'upload.qiniu_upload_token',
                                    async:false,  //同步方式
                                    success: function(ret){
                                        upload_token = ret.data;
                                    } 
                                }); 
                                return upload_token;
                            }
                            };
                    break;
                
                    default:
                    var upload_data = {};
                    break;
                }
                layedit.set({
                    uploadImage: {
                        url: $('#poster-images-upload').data('uploadurl')
                        ,data: upload_data
                        ,uploadtype: uploadtype
                        ,cdnurl: $('#poster-images-upload').data('cdnurl')
                    }
                });
                le = layedit.build('contentEditor');
                //视频封面
                var uploadKefuPic = upload.render({
                    elem: '#video_pic-upload'
                    ,url: $('#video_pic-upload').data('uploadurl')
                    ,multiple: true
                    ,data: upload_data
                    ,before: function(obj){
                    layer.load(); //上传loading
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#video_pic-upload-img').show().attr('src', result); //图片链接（base64）
                    });
                    }
                    ,done: function(res){
                    layer.closeAll('loading'); //关闭loading
                    //如果上传失败
                    if(res.code > 0){
                        if(res.msg != ''){
                        return layer.msg(res.msg);
                        }else{
                        return layer.msg('上传失败');
                        }
                    }else{
                        //上传成功
                        switch (uploadtype) {
                        case 'qiniu':
                            var imgkey = res.key
                            break;
                        default:
                        var imgkey = res.data.key
                            break;
                        }
                        $('#data-video_pic').val($('#video_pic-upload').data('cdnurl')+'/'+imgkey);
                        return layer.msg('上传成功');
                    }
                    }
                    ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    //演示失败状态，并实现重传
                    var demoText = $('#test-upload-demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadKefuPic.upload();
                    });
                    }
                });
                //海报背景图
                var uploadKefuPic = upload.render({
                    elem: '#poster-images-upload'
                    ,url: $('#poster-images-upload').data('uploadurl')
                    ,multiple: true
                    ,data: upload_data
                    ,before: function(obj){
                    layer.load(); //上传loading
                    }
                    ,done: function(res){
                    layer.closeAll('loading'); //关闭loading
                    //如果上传失败
                    if(res.code > 0){
                        if(res.msg != ''){
                        return layer.msg(res.msg);
                        }else{
                        return layer.msg('上传失败');
                        }
                    }else{
                        //上传成功
                        switch (uploadtype) {
                            case 'qiniu':
                            var imgkey = res.key
                            break;
                            default:
                            var imgkey = res.data.key
                            break;
                        }
                        if($('.drag[type=img]').length>0){
                            $('.drag[type=img] img').attr('src', $('#poster-images-upload').data('cdnurl')+'/'+imgkey);
                        }else{
                            var img = '<img src="'+$('#poster-images-upload').data('cdnurl')+'/'+imgkey+'" onload="document.getElementById(\'poster\').style.height=(this.height*320/this.width)+\'px\'" />';
                            var index = 0;
                            var obj = $('<div class="drag" type="img" index="' + index +'" style="z-index:' + index+'">' + img+'</div>');
                            $('#poster').append(obj);
                        }
                        return layer.msg('上传成功');
                    }
                    }
                    ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    return layer.msg('上传失败');
                    }
                });
                // poster start
                $.get(layui.setter.base+"lib/extend/designer.js?v={VERSION}", function(data){
                    eval(data);
                    for (let i = 0; i < layui.poster.length; i++) {
                        if(layui.poster[i].type == 'img'){
                            var img = '<img src="'+layui.poster[i].src+'" onload="document.getElementById(\'poster\').style.height=(this.height*320/this.width)+\'px\'" />';
                            var index = 0;
                            var obj = $('<div class="drag" type="img" index="' + index +'" style="z-index:' + index+'">' + img+'</div>');
                            $('#poster').append(obj);
                        }else{
                            $('.btn-com[data-type='+layui.poster[i].type+']').click();
                            $('.drag[type='+layui.poster[i].type+']').css(layui.poster[i]);
                        }
                    }
                },"text");
                // poster end
                layer.closeAll('loading'); //关闭loading
                clearInterval(siv);
            }
        }, 200);
    
        form.on('radio(jump)', function(data){
            if(data.value == 'url'){
                $('#jump_url').show();
            }else{
                $('#jump_url').hide();
            }
        });
        
        /* 监听提交 */
        form.on('submit(component-form-demo1)', function(data){
            var poster = [];
            $('.drag').each(function(){
                var obj = $(this);
                var type = obj.attr('type');
                var left = obj.css('left'),top = obj.css('top');
                var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
                if(type=='nickname'){
                    d.size = obj.attr('size');
                    d.color = obj.attr('color');
                } else if(type=='qr'){
                    d.size = obj.attr('size');
                } else if(type=='img'){
                    d.src = obj.find('img').attr('src');
                }
                poster.push(d);
            });
            data.field['data[content]'] = layedit.getContent(le);//详情内容
            data.field['data[poster]'] = poster;
            var scope = [];
            $('.scope:checked').each(function(){
                scope.push($(this).val())
            });
            data.field['data[scope]'] = scope.join();
            data.field['data[video][alivideo]'] = layui.alivideo;
            // console.log(data.field);
            // return false;
            $.post(
                layui.setter.baseUrl+'sale/add',
                data.field,
                function(ret){
                    var {code,msg,data} = ret;
                    layer.msg(msg);
                    $('#token').val(data.token);
                    if(code == 0){
                        layer.closeAll('page');
                        layui.table.reload('LAY-sale-manage');
                    }
                }
            );
            return false;
        });
    });
    </script>